<!DOCTYPE HTML>
<html>
<head>
    <title>预订房间</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="applijewelleryion/x-javascript">
         addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); }
    </script>
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css'/>
    <!-- Custom Theme files -->
    <link href="css/style.css" rel='stylesheet' type='text/css'/>
    <script src="js/jquery-1.11.1.min.js"></script>
    <!--webfonts-->
    <link href='http://fonts.useso.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.useso.com/css?family=Open+Sans:400,300italic,300,600' rel='stylesheet' type='text/css'>
    <!--//webfonts-->
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <script>
        function DateMinus(date1,date2){//date1:小日期   date2:大日期
            var sdate = new Date(date1);
            var now = new Date(date2);
            var days = now.getTime() - sdate.getTime();
            var day = parseInt(days / (1000 * 60 * 60 * 24));
            return day;
        }
        function myFun() {
            var name = $('#name1').val();
            var roomtype = $('#roomType1').val();
            var phone = $('#phone1').val();
            var comeday = $('#datepicker').val();
            var leaveday = $('#datepicker1').val();
            var nums = $('#nums1').val();
            var orderDay = DateMinus(comeday,leaveday);

            $('#name2').val(name);
            $('#phone2').val(phone);
            $('#comeDay').val(comeday);
            $('#leaveDay').val(leaveday);
            $('#roomType2').val(roomtype);
            $('#nums2').val(nums);
            switch ($('#roomType1').val()) {
                case '豪华商务套间':
                    var money = orderDay * 660;
                    $('#money').val(money);
                    break;
                case '豪华度假套间':
                    var money = orderDay * 900;
                    $('#money').val(money);
                    break;
                case '豪华总统套间':
                    var money = orderDay * 1200;
                    $('#money').val(money);
                    break;
            }
        }
    </script>
</head>
<body>
<!-- banner -->
<div class="banner5">
    <div class="header">
        <div class="container">
            <div class="logo">
                <h1><a href="index.html">喜来登酒店</a></h1>
            </div>
            <nav class="navbar navbar-default" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <!--/.navbar-header-->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="index">主页</a></li>
                        <li class="active"><a href="rooms.html">房间预订</a></li>
                        <li><a href="gallery.html">画廊</a></li>
                        <!--<li><a href="shortcodes.html">Short Codes</a></li>-->
                        <li><a href="signin">用户登录</a></li>
                        <li><a href="contact">联系我们</a></li>
                        <li><a href="personal">个人中心</a></li>
                    </ul>
                </div>
                <!--/.navbar-collapse-->
            </nav>
            <div class="search-box">
                <div id="sb-search" class="sb-search">
                    <form>
                        <input class="sb-search-input" placeholder="请输入您想要搜索的信息..." type="search"
                               name="search" id="search">
                        <input class="sb-search-submit" type="submit" value="">
                        <span class="sb-icon-search"> </span>
                    </form>
                </div>
            </div>
            <div class="clearfix"></div>

            <!-- search-scripts -->
            <script src="js/classie.js"></script>
            <script src="js/uisearch.js"></script>
            <script>
                new UISearch(document.getElementById('sb-search'));
            </script>
            <!-- //search-scripts -->

        </div>
    </div>
</div>
<!-- banner -->
<!-- details -->
<div class="details">
    <div class="container">
        <div class="col-md-7 details-left">
            <img src="images/16.jpg" class="img-responsive img-rounded" alt="">
        </div>
        <div class="col-md-5 details-right">
            <span>邂逅不期而遇的美好</span>
            <hr>
            <li>以最优的价格享受最好的服务</li>
            <li>支持信用卡支付</li>
            <li>不需要支付订金</li>
            <hr>
            <p>&nbsp;&nbsp;&nbsp;&nbsp;喜来登酒店位于繁华的努沙杜瓦，酒店优越的位置让住客前往市区内的热门景点变得方便快捷。
                在这家舒适的巴厘岛酒店中享受尊贵的服务与设施， 如 池畔吧, 吸烟区, 家庭房, 自行车出租服务等等。
                酒店每一间客房可感受到喜来登酒店的独有风格， 设计典雅， 大方高贵，给人舒适与宾至如归之感！</p>
        </div>
        <div class="clearfix"></div>
        <div class="details-top">
            <h3>Details:</h3>
            <h5>线上预订可享受9折优惠</h5>
            <h6>营业时间 : 24小时营业</h6>
            <h4>Included</h4>
            <li>酒店允许携带儿童入住</li>
            <h4>Not included</h4>
            <li>加床及儿童政策取决于您所选的房型，若超过房型限定人数，或携带儿童年龄不在政策描述范围内，可能需收取额外费用。</li>
            <li>酒店不允许携带宠物进入。</li>
            <h4>Additional information</h4>
            <li>入住时间：16:00以后 离店时间：11:00以前</li>
        </div>
        <div class="booking-form">
            <div class="col-md-6">
                <form>
                    <h5>姓名</h5>
                    <input type="text" value="" style="border-radius: 5px;" id="name1">
                    <br>
                    <h5>手机号</h5>
                    <input type="text" value="" style="border-radius: 5px;" id="phone1">
                    <br>
                    <h5>房间类型</h5>
                    <select class="form-control" style="width: 25%;border: black 1px solid;" id="roomType1">
                        <option>豪华商务套间</option>
                        <option>豪华度假套间</option>
                        <option>豪华总统套间</option>
                    </select>

                    <br>
                </form>
            </div>
            <div class="col-md-6">
                <link rel="stylesheet" href="css/jquery-ui.css"/>
                <script src="js/jquery-ui.js"></script>
                <script>
                    $(function () {
                        $("#datepicker,#datepicker1").datepicker();
                    });
                </script>
                <form>
                    <h5>入住日期</h5>
                    <div>
                        <input class="date" id="datepicker" type="text" value=""
                               onFocus="this.value = '';"
                               onBlur="if (this.value == '') {
                                          this.value = '入住日期';
                                      }"
                               style="border-radius: 5px;border: black 1px solid;" autocomplete="off">
                    </div>
                    <br>
                    <h5>离店日期</h5>
                    <div>
                        <input class="date1" id="datepicker1" type="text" value=""
                               onFocus="this.value = '';"
                               onBlur="if (this.value == '') {
                                          this.value = '离开日期';
                                      }"
                               style="border-radius: 5px;border: black 1px solid;" autocomplete="off">
                    </div>
                    <br>
                    <h5>人数</h5>
                    <input  type="text"
                           class="form-control input-small" style="width: 15%;" id="nums1">
                    <br>

                    <input type="button" class="btn btn-success btn-md" data-toggle="modal" data-target="#myModal" value="预订" onclick="myFun()">
                    <!--<input onclick="myFun()" class="btn btn-default" value="弹出">-->
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">确认信息及提交</h4>
                                </div>
                                <div class="modal-body">
                                    <form action="#" method="post">
                                        <h5>姓名</h5>
                                        <input type="text" value="" style="border-radius: 5px;" id="name2" disabled>
                                        <br>
                                        <h5>手机号</h5>
                                        <input type="text" value="" style="border-radius: 5px;" id="phone2" disabled>
                                        <br>
                                        <h5>入住日期</h5>
                                        <input type="text" value="" style="border-radius: 5px;" id="comeDay" disabled>
                                        <br>
                                        <h5>离店日期</h5>
                                        <input type="text" value="" style="border-radius: 5px;" id="leaveDay" disabled>
                                        <br>
                                        <h5>房间类型</h5>
                                        <input type="text" value="" style="border-radius: 5px;width: 20%;" id="roomType2" disabled>
                                        <br>
                                        <h5>人数</h5>
                                        <input type="text" value="" style="border-radius: 5px;width: 15%;" id="nums2" disabled>
                                        <br>
                                        <h5>交易金额</h5>
                                        <input type="text" value="" style="border-radius: 5px;width: 15%;" id="money" disabled>
                                        <br>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">支付宝支付</button>
                                    <button type="submit" class="btn btn-primary">到店支付</button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- details -->
<!-- footer -->
<div class="footer">
    <div class="container">
        <div class="col-md-2 deco">
            <h4>导航</h4>
            <li><a href="index.html">主页</a></li>
            <!--<li><a href="shortcodes.html">Short Codes </a></li>-->
            <li><a href="signin.html">登录</a></li>
            <li><a href="contact.html">联系我们</a></li>
        </div>
        <div class="col-md-2 deco">
            <h4>链接</h4>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">酒店发展</a></li>
            <li><a href="#">需要帮助？</a></li>
        </div>
        <div class="col-md-2 deco">
            <h4>社交</h4>
            <div class="soci">
                <li><a href="#"><i class="f-1"> </i></a></li>
                <li><a href="#"><i class="t-1"> </i></a></li>
                <li><a href="#"><i class="g-1"> </i></a></li>
            </div>
        </div>
        <div class="col-md-3 cardss">
            <h4>付款方式</h4>
            <li><i class="visa"></i></li>
            <li><i class="ma"></i></li>
            <li><i class="paypal"></i></li>
            <div class="clearfix"></div>
        </div>
        <div class="col-md-3 pos">
            <h4>新消息</h4>
            <form method="post">
                <input type="text" class="textbox" value="邮箱" style="border-radius: 5px;background-color: white;"
                       onFocus="this.value = '';"
                       onBlur="if (this.value == '') {this.value = '邮箱';}">
                <div class="smt">
                    <input type="submit" value="提交" style="border-radius: 5px;">
                </div>
            </form>
        </div>
        <div class="clearfix"></div>
    </div>
</div>
<!-- footer -->
</body>
</html>